<template>
  <focusbox>
    <div class="choiceness">
      <div class="carousel">
        <el-carousel
          :interval="5000"
          type="card"
          height="400"
          indicator-position="none"
        >
          <el-carousel-item v-for="(item, index) in 6" :key="index">
            <h3 text="2xl" justify="center">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="father">
        <div v-focusable  ref="centerChild" class="child" @up="event('up', 0)"></div>
        <div
          v-focusable
          class="child"
          @click="btnFull('video_yuns0')"
        >
        <video
              id="video_yuns0"
              class="card-video-white"
              src="https://vedio.dsmp.voyah.com.cn/website/pc_conference_v1.mp4"
              width="100%"
              controls
              height="100%"
              preload="auto"
            ></video>
    </div>
        <div v-focusable class="child yuns" @click="btnFull('video_yuns')">
            <video
              id="video_yuns"
              class="card-video-white"
              src="https://blog-1253324855.cos.ap-shanghai.myqcloud.com/videos/white.mp4"
              width="100%"
              controls
              height="100%"
              preload="auto"
            ></video>
        </div>
        <div v-focusable class="child" @click="btnFull('video_yuns1')">
            <video
              id="video_yuns1"
              class="card-video-white"
              src="https://vd3.bdstatic.com/mda-km9677suxsyniv6r/hd/mda-km9677suxsyniv6r.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1676816754-0-0-2a8dc665705e5e5aea7fabebc9f76d08&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3354622505&vid=14404843698517941247&abtest=&klogid=3354622505"
              width="100%"
              controls
              height="100%"
              preload="auto"
            ></video>
        </div>
        <div v-focusable class="child"></div>
      </div>
      <div class="btmCenter">
        <div
          v-focusable
          class="btnChild"
          :id="'li' + item"
          @onFocus="focus('li' + item, item)"
          @up="event('up', item)"
          v-for="item in 20"
          :key="item"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </focusbox>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
const centerChild = ref();

const event = (type: string, num: number) => {
  if (num == 0) {
    proxy.$tv.requestFocus(
      proxy.$tv.getElementByPath('//div[@class="menu"]/div[1]')
    );
  } else if (num > 0 && num < 5) {
    proxy.$tv.requestFocus(
      proxy.$tv.getElementByPath('//div[@class="father"]/div[4]')
    );
  } else {
    proxy.$tv.next(type);
  }
};
const btnFull = (val: string) => {
   const video_: any = document.getElementById(val);
   console.log('视频是否在暂停中', video_.paused) 
   if(video_.requestFullscreen){
    video_.requestFullscreen();
    if(video_.paused){
        video_.play()
    }else{
        video_.pause()
    }
   }
}
const focus = (a: string, num: number) => {
  let target = <HTMLImageElement>document.getElementById(a);
  let parent = <HTMLImageElement>(
    document.getElementsByClassName("choiceness")[0]
  );
  if (num > 0 && num < 5) {
    parent.scrollTop = 0;
  } else {
    parent.scrollTop = target!.offsetTop - parent.offsetTop;
  }
};
</script>

<style lang="scss" scoped>
.card-video-white {
    display: block;
    height: 99%;
    width: 99%;
    object-fit: fill;
}
.choiceness {
  width: 100%;
  height: 85vh;
  overflow: hidden;
  padding-bottom: 20px;
  .father {
    height: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding-top: 20px;
    .child {
      width: 99%;
      height: 100%;
      border-radius: 10px;
      border: 1px solid rgb(255, 255, 255);
    }
  }
  .btmCenter {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    padding-top: 20px;
    margin: 0 10px;
    .btnChild {
      width: 100%;
      height: 500px;
      border-radius: 10px;
      border: 1px solid rgb(255, 255, 255);
    }
  }
}
</style>
